<template>
  <transition name="el-fade-in-linear">
    <div v-if="show" :class="{left:placement==='left',right:placement==='right',bottom:placement==='bottom'}" class="drawer-warp">
      <slot/>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'UDrawer',
  props: {
    placement: {
      type: String,
      default: 'right'
    },
    closable: {
      type: Boolean,
      default: false
    },
    show: {
      tyep: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  }
}
</script>

<style scoped>
  .drawer-warp{
    background: white;
    /*padding: 10px;*/
    z-index: 999;
    position: absolute;
  }
  .drawer-warp.left{
    left: 0px;
    height: 100%;
    top: 0px;

  }
  .drawer-warp.right{
    right: 0px;
    height: 100%;
    top: 0px;
  }
  .drawer-warp.bottom{
    bottom: 0px;
    width: 100%;
    height: inherit;
  }
</style>
